<template>
	<div class="list">
		<div class="list1" v-for='item in hotList'>
			<img :src="item.imgUrl">
			<p>{{item.title}}</p>
			<span>￥{{item.mark}}<i>起</i></span>
		</div>
	</div>
</template>
<script>
	export default{
		props:[
			'hotList'
		],
	}
</script>
<style lang='stylus' scoped>
	.list{
		width: 100%;
		overflow-x: scroll;
		display: -webkit-box;
		border-bottom: 10px solid #eee;
		padding-bottom:8px;
		.list1{
			width: 26%;
			padding:2px 5px;
			img{
				width: 100%;
			}
			p{
				font-size: .37rem;
				text-align: center;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				padding-top: 5px;
			}
			span{
				width: 100%;
				text-align: center;
				font-size: .37rem;
				display:block;
				color: #ff8300;
				margin-top: 5px;
				i{
					color: #858585;
					font-style: normal;
				}
			}
		}
	}
</style>